<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Alpha-欢迎您</title>
    <link rel="shortcut icon" href="../icon/title.ico"/>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/bootstrap3.3.7.min.css">

    <script src="../js/jquery-1.10.2.min.js"></script>
    <script src="../js/bootstrap3.3.7.min.js"></script>
    <script src="../js/index.js"></script>
    <style>
        .content{
            width: 80%;margin: auto}
        /*h3{
            width: 100%;text-align: center;padding: 30px 0;}*/
        b{font-size:18px;}

    </style>
    <script>

    </script>
</head>
<body>

<div class="warp">
    <div>
        <h1><a href="../index.html">Alpha</a></h1>
    </div>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"></a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">javascript</a></li>
                    <li><a href="#">css</a></li>
                    <li><a href="#">jquery</a></li>
                    <li><a href="#">angular</a></li>
                    <li><a href="#">其他</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="img">
        <img src="../images/javaScript.png" style=";height: 300px;background:#ccc;" alt="">
    </div>
    <hr>
    <!--返回顶部箭头-->
    <div id="top" style="width: 50px;height: 50px;background-color: #999;position: fixed;right: 50px;bottom:50px;text-align: center;line-height: 50px;display: none;">
        <b>
            <a style="text-decoration:none;color:#fff;;" href="javascript:;">顶部</a>
        </b>
    </div>

    <div class="content">
        <h3>各种事件对象</h3>
        <div>
            <p>事件绑定和event</p>
            <pre>
            //object.addEventListener('事件',fn，false)
            object.addEventListener("事件名称 ",function(ev){
                ////在低版本的chrome和firefox浏览器中需要兼容性处理
            //传参的时候传event兼容火狐浏览器,因为火狐的机制,event必须按传参的方式传近期
                var oEvent=ev||window.event;
                //阻止冒泡
                oEvent.stopPropagation();
             },false);
            //false表示:事件冒泡;true:捕获;
            事件冒泡和捕获区别:
            事件冒泡:内部元素的事件会先被触发，然后再触发外部元素.
            事件捕获:外部元素的事件会先被触发，然后才会触发内部元素的事件;
            **事件绑定的好处：一个元素可以触多个事件,不会被覆盖;
            **事件绑定不支持IE8以及以下版本
            //阻止事件冒泡行为:
            chrome和Firefox：event.stopPropagation(),把该方法 放到要阻止冒泡的object函数里面
            IE：event.cancelBubble=true
            <b>***************特别重要，DOMContentLoaded</b>可以代替onload事件;
            DOMContentLoaded ：它的意思是：等DOM树构建完成后执行的事件,没必要等页面全部加载完成;
            document.addEventListener("DOMContentLoaded", function() {
                 // ...代码...
            }, false);
             //兼容IE8或更早版本
            obj.attachEvent("onclick", fn);
            </pre>
            <p>移除事件绑定</p>
            <pre>
             object.removeEventListener("事件名称", 要移除的方法函数名)
            </pre>
        </div>
        <div>
            <b>鼠标事件：</b>
        </div>
        <div>
            <p>1.oncontextmenu鼠标右击触发该事件</p>
            <pre>
                object.oncontextmenu=function(){myCode};
</pre>
        </div>
        <div>
            <p>2.ondblclick鼠标双击击触发该事件</p>
            <pre>
                object.ondblclick=function(){SomeJavaScriptCode};
</pre>
        </div>
        <div>
            <p>3.onmousedown鼠标按下时触发该事件</p>
            <pre>
                object.onmousedown=function(){SomeJavaScriptCode};
</pre>
        </div>
        <div>
            <p>4.onmouseup鼠标松开时触发该事件</p>
            <pre>
                object.onmouseup=function(){SomeJavaScriptCode};
</pre>
        </div>
        <div>
            <p>5.onmouseenter 鼠标移动到某元素时触发该事件</p>
            <pre>
                object.onmouseenter =function(){SomeJavaScriptCode};
                注意:onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡.
                该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
</pre>
        </div>
        <div>
            <p>6. onmouseleave鼠标从某元素移开时触发该事件</p>
            <pre>
                object.onmouseleave=function(){SomeJavaScriptCode};
</pre>
        </div>
        <div>
            <b>键盘事件：</b>
        </div>
        <div>
            <p>1.获取键码方法：</p>
            <pre>
            function fn(ev){
                // 使用 which 或 keyCode, 这样可支持不同浏览器
                var x = ev.which || ev.keyCode;
                return x;
            }
            document.onkeydown= function () {
                alert(fn())
            };
</pre>
            <div>
                <p>2.onkeydown 当按下键盘上某个键时触发该事件</p>
            <pre>
                object.onkeydown =function(){SomeJavaScriptCode};
</pre>
            </div>
            <div>
                <p>3.onkeyup 当松开键盘上某个键时触发该事件</p>
            <pre>
                object.onkeyup =function(){SomeJavaScriptCode};
</pre>
            </div>
            <div>
                <p>4.onkeypress 当按下并松开键盘上某个键时触发该事件</p>
            <pre>
                object.onkeypress =function(){SomeJavaScriptCode};
</pre>
            </div>
        </div>
        <div>
            <b>其他常用事件对象:</b>
            <div>
                <p>1.onpageshow 事件在用户浏览网页时触发</p>
            <pre>
                object.onpageshow=function(){myCode};
                **可以利用cookie过期时间来使用该事件
</pre>
            </div>
            <div>
                <p>2.onresize 事件在用户改变窗口大小时触发</p>
            <pre>
                window.onresize=function(){SomeJavaScriptCode};
                **所有标签都支持该事件；
</pre>
            </div>
            <div>
                <p>3.onscroll 事件当用户滚动 滚动条时触发</p>
            <pre>
                object.onscroll=function(){myScript};
                **所有标签都支持该事件；
</pre>
            </div>
        </div>
        <div>
            <b>表单常用事件:</b>
            <div>
                <p>1.onblur 该事件在元素失去焦点时触发</p>
            <pre>
                object.onblur=function(){SomeJavaScriptCode};
                **onblur 经常用于Javascript验证代码，一般用于表单输入框。
</pre>
            </div>
            <div>
                <p>2.oninput 该事件当元素值被改变时触发</p>
            <pre>
                object.oninput=function(){SomeJavaScriptCode};
                注意:该事件和change有点类似,oninput会时时检测每一次改变的数据的改变;
                而onchage则需要等输出结束并且失去焦点时触发;
</pre>
            </div>
            <div>
                <p>3.onfocu和onfocuout 事件 当元素"即将"获得或取消焦点时触发</p>
            <pre>
                object.onfocus=function(){myScript};
                onfocus事件一般用于表单,当元素“即将”获取焦点的时候触发该事件,
                意思并没有真正触发到元素。
                object.onfocuout=function(){myScript};
                onfocuout事件一般用于表单,当元素“即将”失去焦点的时候触发该事件
                <b>注意</b>:onfocusout 事件类似于 onblur 事件。
                主要的区别是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否获取焦点，需要使用 onfocusout 事件
</pre>
            </div>
            <div>
                <p>4.onchange 该事件当元素值被改变时触发</p>
            <pre>
                object.onchange=function(){SomeJavaScriptCode};
                注意:该事件和onblur有点类似
                例如：< input type="text"  id="txt" />
                onchange:当input的value值被改变时<b>并且</b>鼠标移除了该元素,
                onchange事件才能触
</pre>
            </div>
            <div>
                <p>5.onsubmit 该事件在元素被提交时触发</p>
            <pre>
                object.onsubmit=function(){SomeJavaScriptCode};
                **该事件用在类型为 type="submit"< input type="submit" value="提交">
</pre>
            </div>
            <div>
                <p>6.oncopy 该事件在 文本被复制时触发</p>
            <pre>
                object.oncopy=function(){SomeJavaScriptCode};
                **文本复制时触发该事件
</pre>
            </div>
            <div>
                <p>7.onpaste 该事件在粘贴时触发</p>
            <pre>
                object.onpaste=function(){SomeJavaScriptCode};
                **一般用在输入框,粘贴在输入框时触发
</pre>
            </div>
        </div>
    </div>
    <hr>
    <div class="footer">
        <div>
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
        <div class="footer-bottom">
            <p>这是一段内容</p>
        </div>
    </div>
</div>

</body>
</html>
<script>
    window.addEventListener('scroll', function () {
        var oTop=document.getElementById('top');
        var oH=document.documentElement.clientHeight;
        var oS=document.body.scrollTop;
        if(oH+oS>oH){
            oTop.style.display="block";

        }else {
            oTop.style.display="none";
        }
        oTop.onclick= function () {
            var timer=null;
            clearInterval(timer);
            timer=setInterval(function () {
                console.log(oS)
                document.body.scrollTop=(oS*=0.8);
                if (oS<=1){
                    oS=0;
                    clearInterval(timer);
                    oTop.style.display="none";
                    //alert(oS)
                }
                console.log(oS)
            },30)
        }
    },false);
</script>